<template>
    <div>
        <mt-header class="m_mint_header" fixed title="提币">
            <router-link to="/m/fund-wallet" slot="left">
                <mt-button icon="back"></mt-button>
            </router-link>
            <router-link to="/m/extract-record" slot="right">
                <mt-button>提币记录</mt-button>
            </router-link>
        </mt-header>
        <div class="h50"></div>
        <div class="extract_form">
            <mt-field label="提币币种" disabled :value="cashConfigData.coin"></mt-field>
            <mt-field label="提币地址" placeholder="请输入提币地址" v-model="toAddress"></mt-field>
            <mt-field label="数量" :placeholder="'最少提币数量'+cashConfigData.minAmount" type="number"
                      v-model="amount"></mt-field>
            <mt-field label="手续费" disabled v-model="cashConfigData.fee"></mt-field>
            <mt-field label="到账数量" disabled v-model="getNum"></mt-field>
        </div>
        <div class="extract_form_btn">
            <mt-button size="large" @click.native="requestExtract">确定提币</mt-button>
        </div>
    </div>
</template>

<script>

    let api = '/api/balance';

    export default {
        name: "Extract",
        data() {
            return {
                toAddress: "",
                amount: '',
                getNum: 0,
                cashConfigData: {}
            }
        },
        watch: {
            amount() {
                let num = this.amount * 1 - this.cashConfigData.fee;
                if (num > 0) {
                    this.getNum = num;
                } else {
                    this.getNum = 0;
                }
            }
        },
        mounted() {
            this.requestGetCashConfig()
        },
        methods: {
            requestGetCashConfig() {
                this.requestAxios.requestWeb('post', '/cash_config.do', null, (response) => {
                    // console.log("cash_config == ",response.data);
                    this.cashConfigData = response.data;
                })
            },
            requestExtract() {
                // if(this.toAddress === '' || !this.toAddress.startsWith("0x") || this.toAddress.length !== 42){
                //     this.$toast({message:"请输入正确的提币地址",duration:1000});
                //     return false;
                // }
                if (this.amount < this.cashConfigData.minAmount) {
                    this.$toast({message: "请输入正确的提币数量", duration: 1000});
                    return false;
                }
                this.requestAxios.requestWeb('post', api + '/cash_out.do', {
                    coin: this.cashConfigData.coin,
                    money: this.cashConfigData.fee,
                    toAddress: this.toAddress,
                    amount: this.amount,
                }, (response) => {
                    this.$toast({message: "成功", duration: 1000})
                })
            }
        }
    }
</script>

<style>
    .extract_form .mint-field {
        background: transparent;
    }

    .extract_form .mint-cell-wrapper {
        font-size: .3rem;
    }

    .extract_form .mint-field-core {
        border-bottom: 1px solid #b5bac8;
        padding-bottom: .1rem;
        background: transparent;
    }

    .extract_form .mint-field-core:disabled {
        border-bottom: 0;
        padding-bottom: 0;
    }

    .extract_form_btn {
        padding: .3rem;
    }

    .extract_form_btn .mint-button {
        margin-top: 1rem;
        background: linear-gradient(#f7a353, #d3580a);
        color: #fff;
        font-size: .3rem;
        height: .7rem;
        box-shadow: 0 0 10px #dbbaa5;
    }

    a:focus, a:hover {
        color: #333;
    }
</style>
